import { useIntersectionObserver } from '@vueuse/core'
export default {
  // 指令名:{生命周期}
  xxxx: {
    mounted () {
      console.log('xxxx')
    }
  },
  oooo: {
    mounted () {
      console.log('oooo')
    }
  },
  // 图片进入可视区域再进行加载（给指令所在img赋值src）
  //   使用  v-lazyimg="图片地址"
  lazyimg: {
    // 初始化处理
    mounted (dom, obj) {
      //   dom.onerror = function () {// 图片出错的处理}
      const { stop } = useIntersectionObserver(
        // target:需要监听的目标dom
        dom,
        ([{ isIntersecting }], option) => {
          // isIntersecting:是否进入可视区域 true就是进入，false:没进入  options:读取当前配制
          if (isIntersecting) {
            stop()
            //    1:判断该dom有没有进入可视区域,如果在可视区域，将dom.src=值
            dom.src = obj.value
          }
        },
        // 设置配制
        { threshold: 0 }
      )
    },
    // 更新时处理
    updated (dom, obj) {
      if (obj.oldValue !== obj.value) {
        // 当前更新的就是图片信息
        // 图片数据来自于接口，要一定时间获取，在这时间前，它的value是undefined,接口一获取到就
        const { stop } = useIntersectionObserver(
          // target:需要监听的目标dom
          dom,
          ([{ isIntersecting }], option) => {
            // isIntersecting:是否进入可视区域 true就是进入，false:没进入  options:读取当前配制
            if (isIntersecting) {
              stop()
              //    1:判断该dom有没有进入可视区域,如果在可视区域，将dom.src=值
              dom.src = obj.value
            }
          },
          // 设置配制   threshold:0-1范围，进入可视区域范围多大
          { threshold: 0 }
        )
      }
    },
    // 销毁时处理
    befreUnmount () {}
  }
}
